/*
 * @Author: Tu 
 * @Date: 2020-05-27 11:16:38 
 * @Last Modified by:   Tu 
 * @Last Modified time: 2020-05-27 11:16:38 
 */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* reset */
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #F0F8FF;
        }

        .header {
            background-color: #E0FFFF;
            height: 60px;
            line-height: 60px;
            text-align: center;
            color: #333;
        }

        .container {
            width: 400px;
            margin: 0 auto;
            padding: 10px;
            background-image: url("../img/timg2.jpg");
            border: 1px solid silver;
        }

        .search {
            height: 30px;
            width: 280px;
        }

        .btn {
            width: 100px;
            height: 34px;
            color: #333;
            background-color: #7FFFD4;
            border: 1px solid #00FF7F;
        }

        .theme {
            color:#00BFFF ;
            margin-top: 20px;
            padding-left: 30px;
        }

        img {
            width: 400px;
            margin: 10px 0;
        }

        p {
            padding: 10px;
            color: #333;
        }
    </style>
</head>
<body>
    <h3 class="header">
        个人网站
    </h3>
    <div class="container">
        <form action="https://www.baidu.com/s">
            <input type="text"
                    class="search"
                    placeholder="请输入搜索关键字"
                    name="wd"
            >
            <input class="btn" type="submit" value="百度一下">
        </form>
        <h3 class="theme">
            |About Us|
        </h3>
        <img src="../img/timg1.jpg" alt="图片加载失败">
        <p>
            关于单纯的信任
        </p>
        <p>
            关于拥抱的心疼 
        </p>
        <p>
            关于青春 那件傻事的余震 
        </p>
        <p>
            就用这一首歌来作证
        </p>
        <p>
            2015年 周笔畅 反思青春 温情解读关于（我们）
        </p>
        <a href="https://baidu.com" target="_blank">去百度</a>
        <a href="https://taobao.com" target="_blank">去淘宝</a>
    </div>
</body>
</html>
